<template>
    <n-card>
        <n-collapse>
            <n-collapse-item title="搜索">
                <n-form
                    label-width="90"
                    class="w-full flex justify-around mb-20px"
                    :show-feedback="false"
                >
                    <n-grid v-if="model === 'customer'" :cols="5" :x-gap="20">
                        <n-form-item-gi label="客户账号">
                            <n-input
                                v-model:value="userSearchContent.account"
                                placeholder="输入客户账号"
                                maxlength="9"
                            />
                        </n-form-item-gi>
                        <n-form-item-gi label="客户昵称">
                            <n-input
                                v-model:value="userSearchContent.username"
                                placeholder="输入客户昵称"
                            />
                        </n-form-item-gi>
                        <n-form-item-gi label="客户手机">
                            <n-input
                                v-model:value="userSearchContent.phone"
                                placeholder="输入客户手机号"
                                maxlength="11"
                            />
                        </n-form-item-gi>
                        <n-form-item-gi label="公司名称">
                            <n-input
                                v-model:value="userSearchContent.companyName"
                                placeholder="输入客户公司名称"
                            />
                        </n-form-item-gi>
                        <n-form-item-gi label="客户状态">
                            <n-select
                                v-model:value="userSearchContent.status"
                                :options="userStatusOptions"
                                placeholder="选择客户状态"
                            />
                        </n-form-item-gi>
                    </n-grid>
                    <n-grid v-else :cols="4" :x-gap="20">
                        <n-form-item-gi label="员工账号">
                            <n-input
                                v-model:value="userSearchContent.account"
                                placeholder="员工账号"
                            />
                        </n-form-item-gi>
                        <n-form-item-gi label="员工昵称">
                            <n-input
                                v-model:value="userSearchContent.username"
                                placeholder="输入员工昵称"
                            />
                        </n-form-item-gi>
                        <n-form-item-gi label="员工状态">
                            <n-select
                                v-model:value="userSearchContent.status"
                                :options="userStatusOptions"
                                placeholder="选择员工状态"
                            />
                        </n-form-item-gi>
                        <n-form-item-gi label="创建日期">
                            <n-date-picker
                                v-model:value="userSearchContent.createDate"
                                type="daterange"
                                value-format="yyyy-mm-dd"
                            />
                        </n-form-item-gi>
                    </n-grid>
                </n-form>
                <div class="w-full flex justify-end gap-20px">
                    <n-button :focusable="false">
                        <template #icon>
                            <n-icon :component="Refresh" />
                        </template>
                        重置
                    </n-button>
                    <n-button :focusable="false" type="primary" ghost>
                        <template #icon>
                            <n-icon :component="Search" />
                        </template>
                        搜索
                    </n-button>
                </div>
            </n-collapse-item>
        </n-collapse>
    </n-card>
</template>

<script lang="ts" setup>
import { Search, Refresh } from "@vicons/ionicons5";
import { reactive } from "vue";

interface UserSearch {
    account: string;
    username: string;
    phone: string;
    companyName: string;
    status: "normal" | "frozen";
    createDate: number;
}

defineProps<{
    model: "customer" | "staff";
}>();

const userSearchContent = reactive<UserSearch>({
    account: "",
    username: "",
    phone: "",
    companyName: "",
    status: "normal",
    createDate: 0,
});

const userStatusOptions = [
    {
        label: "正常",
        value: "normal",
    },
    {
        label: "冻结",
        value: "frozen",
    },
];
</script>

<style scoped></style>
